<template>
  <!-- 查询条件 -->
  <div class="fml-forms" ref="searchHeight">
    <div class="ui-forms-bodr">
      <el-form
        :inline="true"
        id="form"
        :model="Config.fmlForm"
        ref="Config.fmlForm"
        class="demo-form-inline"
        @submit.native.prevent>
        <fml-input :FormConfig="Config" :showMore="showMore" ref="fmlInput"></fml-input>
      </el-form>
    </div>
    <div
      class="ui-forms-footer"
      :class="Config.defaultConfig.tr.length>2?'flex':''"
      v-if="Config.defaultConfig.search || Config.defaultConfig.reset">
      <div class="fml-more-search flex-1 tc" v-if="Config.defaultConfig.tr.length>2">
        <el-button
          type="text"
          size="small"
          class="search-active"
          @click.native="showMoreSearch"
        >更多搜索</el-button>
        <i :class="showMore?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
      </div>
      <el-button
        size="small"
        @click.native="resetForm"
        icon="el-icon-rank"
        v-if="Config.defaultConfig.reset"
      >{{Config.defaultConfig.reset}}</el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click.native="searchHandle"
        v-if="Config.defaultConfig.search"
        :loading="loading"
      >{{Config.defaultConfig.search}}</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import { State } from "vuex-class"
  import { fmlCom } from "../utils";
  @Component({
    components:{}
  })
  export default class fmlSearch extends Vue{
    showMore:boolean=false;
    resetParam:any={};

    @Prop()
    formConfig:any;
    @Prop()
    loading:boolean;

    get Config():any{
      return this.formConfig;
    }
    get apiParam():any{
      let roles={}
      let organIds={}
       // 角色复选
      if(this.Config.fmlForm.roleIds&&this.Config.fmlForm.roleIds.length>0){
        roles={roleIds:this.Config.fmlForm.roleIds.join(',')}
      }
      // 机构复选
      if(this.Config.fmlForm.organIds&&this.Config.fmlForm.organIds.length>0){
        organIds={organIds:this.Config.fmlForm.organIds.join(',')}
      }
      return {
        ...this.Config.fmlForm,
        ...organIds,
        ...roles
      };
    }
     //点击查询时将请求参数抛出去
    searchHandle() {
      if(this.$store.state.searchParam==this.apiParam){
        this.$store.commit('setUpdateTable')
        return
      }
      this.$store.commit("setSearchParam", this.apiParam);
    }
    // 清空搜索条件
    resetForm() {
     console.log('等待开发')
    }
    // 显示所有搜索项
    showMoreSearch() {
      this.showMore = !this.showMore;
    }
    created() {
      this.$store.commit("resetSearch");
      this.resetParam={...{},...this.Config.fmlForm}
    }
  }
</script>
